<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetism Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="420" style="border:1px solid #d3d3d3;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Helper Function ---
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Drawing Parameters ---
    const wireX = 100;
    const distance_b = 80;
    const length_a = 220;
    const height_AB = 180;

    const Ax = wireX + distance_b;
    const Ay = 240;
    const Bx = Ax;
    const By = Ay - height_AB;
    const Cx = Ax + length_a;
    const Cy = Ay;

    // --- Draw Elements ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // 1. Long Straight Wire with Current I
    ctx.beginPath();
    ctx.moveTo(wireX, 20);
    ctx.lineTo(wireX, 350);
    ctx.stroke();
    drawArrow(ctx, wireX, 50, wireX, 20);
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.fillText('I', wireX - 25, 60);

    // 2. Triangle ABC
    ctx.beginPath();
    ctx.moveTo(Ax, Ay); // A
    ctx.lineTo(Bx, By); // B
    ctx.lineTo(Cx, Cy); // C
    ctx.closePath();
    ctx.stroke();

    // 3. Labels for Vertices A, B, C
    ctx.font = '20px Times New Roman';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('A', Ax - 5, Ay + 5);
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('B', Bx - 5, By - 5);
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText('C', Cx + 5, Cy + 5);

    // 4. Angle theta at C
    const angleRadius = 40;
    ctx.lineWidth = 1.5;
    const startAngle = Math.PI;
    const endAngle = Math.PI + Math.atan2(height_AB, length_a);
    ctx.beginPath();
    ctx.arc(Cx, Cy, angleRadius, startAngle, endAngle);
    ctx.stroke();
    
    // Angle label θ
    const thetaLabelAngle = Math.PI + Math.atan2(height_AB, length_a) / 2;
    const thetaLabelRadius = angleRadius * 0.6;
    const thetaX = Cx + thetaLabelRadius * Math.cos(thetaLabelAngle);
    const thetaY = Cy + thetaLabelRadius * Math.sin(thetaLabelAngle);
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('θ', thetaX, thetaY);

    // 5. Velocity Vector v
    ctx.lineWidth = 2;
    const vArrowY = By + height_AB / 2;
    const vArrowStartX = Cx + 20;
    const vArrowEndX = vArrowStartX + 50;
    drawArrow(ctx, vArrowStartX, vArrowY, vArrowEndX, vArrowY);
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('v', vArrowEndX + 10, vArrowY);

    // 6. Dimension Lines for a and b
    const dimY = Ay + 50;
    const tickHeight = 10;
    
    ctx.save();
    ctx.lineWidth = 1;
    // Main horizontal line for dimensions
    ctx.beginPath();
    ctx.moveTo(wireX, dimY);
    ctx.lineTo(Cx, dimY);
    ctx.stroke();

    // Ticks
    ctx.beginPath();
    ctx.moveTo(wireX, dimY - tickHeight/2);
    ctx.lineTo(wireX, dimY + tickHeight/2);
    ctx.moveTo(Ax, dimY - tickHeight/2);
    ctx.lineTo(Ax, dimY + tickHeight/2);
    ctx.moveTo(Cx, dimY - tickHeight/2);
    ctx.lineTo(Cx, dimY + tickHeight/2);
    ctx.stroke();

    // Arrows and Labels
    ctx.font = 'italic 18px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    // Dimension b
    drawArrow(ctx, (wireX+Ax)/2, dimY, wireX, dimY, 8);
    drawArrow(ctx, (wireX+Ax)/2, dimY, Ax, dimY, 8);
    ctx.fillText('b', (wireX + Ax) / 2, dimY - 4);
    
    // Dimension a
    drawArrow(ctx, (Ax+Cx)/2, dimY, Ax, dimY, 8);
    drawArrow(ctx, (Ax+Cx)/2, dimY, Cx, dimY, 8);
    ctx.fillText('a', (Ax + Cx) / 2, dimY - 4);
    
    ctx.restore();

    // 7. Caption
    ctx.font = '20px "SimSun", "Songti SC"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('习题 9-6 图', canvas.width / 2, canvas.height - 10);

</script>

</body>
</html>